<template>
  <div class="search-main">
    <div class="search-header">
      <span @click="goRouter('/')" class="left-icon"><van-icon name="arrow-left" /></span>
      <div class="input">
        <img src="@/assets/image/search-b.png" alt="">
        <input type="text" placeholder="找货源/商品/供应商/求购">
      </div>
      <span>查询</span>
    </div>
    <div class="search-list" v-if="false">
      <div class="icon">
        <van-icon name="shop-o" />
        搜索相关店铺
      </div>
      <div class="list-item">一个大物件</div>
      <div class="list-item">一个大物件</div>
      <div class="list-item">一个大物件</div>
      <div class="list-item">一个大物件</div>
      <div class="list-item">一个大物件</div>
    </div>
    <div class="search-title">
      搜索历史
    </div>
    <div class="search-history" v-if="false">
      <span>搜索历史</span>
      <van-empty description="暂无记录" />
    </div>
    <div class="search-product">
      <div v-for="(items,index1) in goods" :key="index1" class="item">
        <img :src="items.image" alt="">
        <p class="item-price">$ {{ items.price }}</p>
        <p class="item-sale">月销量 {{ items.sale }}</p>
        <p class="item-content"> {{ items.content }} </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      goods: [
        {
          id: 1,
          image: 'https://argos-shop-online.s3.amazonaws.com/test/2023-03-28/b8a68172-576a-4457-b9aa-10c98bb46782.jpg',
          price: 35.11,
          sale: 200,
          content: 'KwikSafety 北卡罗来纳州夏洛特 THU... '
        },
        {
          id: 2,
          image: 'https://argos-shop-online.s3.amazonaws.com/test/2023-03-28/b8a68172-576a-4457-b9aa-10c98bb46782.jpg',
          price: 35.12,
          sale: 200,
          content: 'KwikSafety 北卡罗来纳州夏洛特 THU... '
        },
        {
          id: 3,
          image: 'https://argos-shop-online.s3.amazonaws.com/test/2023-03-28/b8a68172-576a-4457-b9aa-10c98bb46782.jpg',
          price: 35.13,
          sale: 200,
          content: 'KwikSafety 北卡罗来纳州夏洛特 THU... '
        },
        {
          id: 4,
          image: 'https://argos-shop-online.s3.amazonaws.com/test/2023-03-28/b8a68172-576a-4457-b9aa-10c98bb46782.jpg',
          price: 35.14,
          sale: 200,
          content: 'KwikSafety 北卡罗来纳州夏洛特 THU... '
        },
        {
          id: 5,
          image: 'https://argos-shop-online.s3.amazonaws.com/test/2023-03-28/b8a68172-576a-4457-b9aa-10c98bb46782.jpg',
          price: 35.15,
          sale: 200,
          content: 'KwikSafety 北卡罗来纳州夏洛特 THU... '
        },
        {
          id: 6,
          image: 'https://argos-shop-online.s3.amazonaws.com/test/2023-03-28/b8a68172-576a-4457-b9aa-10c98bb46782.jpg',
          price: 35.16,
          sale: 200,
          content: 'KwikSafety 北卡罗来纳州夏洛特 THU... '
        },
        {
          id: 7,
          image: 'https://argos-shop-online.s3.amazonaws.com/test/2023-03-28/b8a68172-576a-4457-b9aa-10c98bb46782.jpg',
          price: 35.17,
          sale: 200,
          content: 'KwikSafety 北卡罗来纳州夏洛特 THU... '
        },
        {
          id: 8,
          image: 'https://argos-shop-online.s3.amazonaws.com/test/2023-03-28/b8a68172-576a-4457-b9aa-10c98bb46782.jpg',
          price: 35.18,
          sale: 200,
          content: 'KwikSafety 北卡罗来纳州夏洛特 THU... '
        },
      ],
    }
  },
  methods:{
    goRouter(item){
      this.$router.push(item)
    }
  }
}
</script>

<style scoped lang="scss">
.search-main{
  width: 100%;
  min-height: 100vh;
  padding: 0 3%;
  box-sizing: border-box;
  background: #fff;
  .search-header{
    width: 100%;
    height: 45px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    .left-icon{
      font-size: 18px;
      color: #333;
    }
    span{
      font-size: 13px;
      color: #666;
    }
    .input{
      width: 80%;
      height: 35px;
      display: flex;
      align-items: center;
      border-radius: 35px;
      background: #f6f6f6;
      padding: 0 0 0 20px;
      box-sizing: border-box;
      img{
        margin-right: 10px;
        height: 18px;
      }
    }
  }
  .search-list{
    width: 100%;
    .icon{
      width: 100%;
      font-size: 14px;
      color: #333;
      height: 50px;
      line-height: 50px;
    }
    .list-item{
      width: 100%;
      font-size: 14px;
      color: #333;
      line-height: 50px;
      height: 50px;
      border-bottom: 1px solid #f6f6f6;
    }
  }
  .search-title{
    width: 100%;
    margin-top: 20px;
    font-size: 16px;
  }
  .search-history{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    span{
      margin-top: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 5px 15px;
      font-size: 14px;
      background: #f6f6f6;
      border-radius: 15px;
      color: #999;
    }
  }
  .search-product{
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 80px;

    .item {
      position: relative;
      margin-bottom: 10px;
      width: 160px;
      min-height: 220px;
      padding: 6px;
      border: 1px solid #f6f6f6;

      .item-tip {
        position: absolute;
        right: 0;
        top: 0;
        height: 35px;
        background-position: top center;
        background: url("../../assets/image/sell.png") 50% 50%;
        border-bottom-left-radius: 50%;
        border-bottom-right-radius: 50%;
        width: 35px;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        padding: 5px 0;
        box-sizing: border-box;

        p {
          color: #fff;
          width: 100%;
          text-align: center;
          font-size: 8px;
        }
      }

      img {
        width: 160px;
        height: 160px;
      }

      .item-price {
        margin-top: 10px;
        width: 100%;
        color: #002FFF;
        font-size: 16px;
        font-weight: 500;
      }

      .item-sale {
        width: 100%;
        color: #999;
        font-size: 10px;
        margin: 5px 0;
      }

      .item-content {
        width: 100%;
        color: #000;
        font-size: 14px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -moz-box-orient: vertical;
        box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}
</style>